// ====== flex布局类相关 ======
.flex {
  display: flex;
}

.column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.space-aroud {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.start {
  justify-content: flex-start;
}

.end {
  justify-content: flex-end;
}

.self-end {
  justify-self: flex-end;
}

.self-start {
  justify-self: flex-start;
}

.wrap {
  flex-wrap: wrap;
}

.f1 {
  flex: 1;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// ====== margin 相关 ======
$margins: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50);
@each $i in $margins {
  .m-#{$i} {
    margin: #{$i}px;
  }
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
}

// ====== padding 相关 ======
$paddings: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50);
@each $i in $paddings {
  .p-#{$i} {
    padding: #{$i}px;
  }
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
}

// ====== 字体相关 ======
$font-sizes: (12, 14, 16, 18, 20, 22, 24, 26, 28, 30);
@each $size in $font-sizes {
  .font-#{$size} {
    font-size: #{$size}px;
  }
}

.bold {
  font-weight: bold;
}

.lh-30 {
  line-height: 30px;
}

// ====== 其他原子类 ======
.shadow {
  box-shadow: 0 0 10px 2px rgba($color: #000000, $alpha: 0.1);
}

.w-100 {
  width: 100px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

.w-300 {
  width: 300px;
}

.w-p100 {
  width: 100%;
}